<template>
    <div id="apps">

      <el-amap vid="amapDemo" :center="center" :zoom="zoom" class="amap-demo" :events="events" >
        <el-amap-marker v-for="(marker,index) in markers" :key="index" :position="marker.position" :content="marker.content" :events="marker.events"></el-amap-marker>
      </el-amap>
    </div>
  </template>


  <script>
   export default{
      data() {
        let self = this;
        return {
          zoom: 5,
          center: [116.407162, 39.887269],
          markers: [],
          markerRefs: [],
          events: {
            init(o) {
              setTimeout(() => {
                console.log(self.markerRefs);
                let cluster = new AMap.MarkerClusterer(o, self.markerRefs,{
                  gridSize: 80,
                  renderCluserMarker: self._renderCluserMarker
                });
              }, 1000);
			  o.setMapStyle('amap://styles/596bc87b02f1945c85d4036bf3af9245');
            }
          }
        };
      },
		created() {
	          let self = this;
	          let markers = [];
	          let index = 0;
	  
	          let basePosition = [121.59996, 31.197646];
	  
	          while (++index <= 30) {
	            markers.push({
	              position: [basePosition[0] + 0.01 * index, basePosition[1]],
	              content: '<div style="text-align:center; background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
	              events: {
	                init(o) {
	                  self.markerRefs.push(o);
	                }
	              }
	            });
	          }
	  
	          this.markers = markers;
	    },
      methods: {
              _renderCluserMarker(context) {
                const count = this.markers.length;
      
                let factor = Math.pow(context.count/count, 1/18)
                let div = document.createElement('div');
                let Hue = 180 - factor* 180;
                let bgColor = 'hsla('+Hue+',100%,50%,0.7)';
                let fontColor = 'hsla('+Hue+',100%,20%,1)';
                let borderColor = 'hsla('+Hue+',100%,40%,1)';
                let shadowColor = 'hsla('+Hue+',100%,50%,1)';
                div.style.backgroundColor = bgColor
                let size = Math.round(30 + Math.pow(context.count/count,1/5) * 20);
                div.style.width = div.style.height = size+'px';
                div.style.border = 'solid 1px '+ borderColor;
                div.style.borderRadius = size/2 + 'px';
                div.style.boxShadow = '0 0 1px '+ shadowColor;
                div.innerHTML = context.count;
                div.style.lineHeight = size+'px';
                div.style.color = fontColor;
                div.style.fontSize = '14px';
                div.style.textAlign = 'center';
                context.marker.setOffset(new AMap.Pixel(-size/2,-size/2));
                context.marker.setContent(div)
              }
            }
    };
</script>
  <style>
    #apps{
      height: 800px;
      width: 100%;
    }
  </style>